<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        ._con_water_fall {
            position: absolute;
            display: none;
        }

        .demo_water_flow_container::-webkit-scrollbar {
            display: none
        }
    </style>
</head>

<body>
    <div id="demo_water_flow" style="height: 1100px;width: 600px;background-color: blue;"></div>
    <div id="demo_x" class="" style="width: 100%;height:300px;"></div>
    <div id="demo_y" class="" style="width: 100%;height:300px;"></div>
</body>

<!-- 必要 -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/render_somthing.js"></script>
<script>
    // {
    //     var render_somthing_demo_x;
    //     render_somthing_demo_x = new render_somthing();
    //     render_somthing_demo_x.init({
    //         // div的id
    //         id: "#demo_x",
    //         // x/y/flow   分别为x向滚动、y向滚动、瀑布流
    //         method: "x",
    //         // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
    //         container: {
    //             html: `
    // <table style="display:flex;" border="2"></table>                
    // `
    //         },
    //         // 渲染内容的配置
    //         content: {
    //             default: `
    // <tr>
    //     <th data-key=abc>#{title}</th>
    //     <th>#{desc}</th>
    // </tr>            
    // `,

    //         }
    //     })
    //     render_somthing_demo_x.render([{
    //             title: "aaaaaaaa",
    //             desc: "sdf"
    //         },
    //         {
    //             title: "bbb",
    //             desc: "eee"
    //         },
    //         {
    //             title: "eee",
    //             desc: "eee"
    //         },
    //         {
    //             title: "fff",
    //             desc: "eee"
    //         },
    //         {
    //             title: "ggg",
    //             desc: "eee"
    //         },
    //     ]);
    // }

debugger;
    {
        var render_somthing_demo_x;
        render_somthing_demo_x = new render_somthing();
        render_somthing_demo_x.init({
            // div的id
            id: "#demo_x",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
    <table style="display:flex;" border="2"></table>                
    `
            },
            // 渲染内容的配置
            content: {
                default: `
    <tr id=@{ROW_INDEX}>
        <th>#{title}</th>
        <th data-key="cycy">#{desc}</th>
    </tr>            
    `,

            },
            callback: {
                click: function (res) {
                    if (res.key == "cycy") {
                        console.log(res.node);
                    }
                }
            }
        })
        render_somthing_demo_x.render([{
                title: "aaa",
                desc: "sdf"
            },
            {
                title: "bbb",
                desc: "eee"
            },
            {
                title: "eee",
                desc: "eee"
            },
            {
                title: "fff",
                desc: "eee"
            },
            {
                title: "ggg",
                desc: "eee"
            },
        ]);
    }

    //     {
    //         var render_somthing_demo_y;
    //         render_somthing_demo_y = new render_somthing();
    //         render_somthing_demo_y.init({
    //             // div的id
    //             id: "#demo_y",
    //             // x/y/flow   分别为x向滚动、y向滚动、瀑布流
    //             method: "y",
    //             // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
    //             container: {
    //                 html: `
    // <ul></ul>
    //     `
    //             },
    //             // 渲染内容的配置
    //             content: {
    //                 default: `
    // <div style="color:blue;">
    // <li>#{title}</li>
    // <li>#{desc}</li>
    // </div>
    // `,
    //             },
    //             // 条件渲染内容
    //             /*
    //                 ^{ROW_INDEX} - 常量，表示数据数组的下标
    //                 #{title}     - 变量，表示数据数组中对象的key
    //             */
    //             condition: [{
    //                     expression: "^{ROW_INDEX} % 3 ==2",
    //                     html: `
    // <div style="color:red;">
    // <li>#{title}</li>
    // <li>#{desc}</li>
    // </div>
    // `
    //                 },
    //                 {
    //                     expression: `#{title}==="2"`,
    //                     html: `
    // <div style="color:yellow;">
    // <li>#{title}</li>
    // <li>#{desc}</li>
    // </div>
    // `
    //                 },
    //             ],
    //         })
    //         render_somthing_demo_y.render([{
    //                 title: "1",
    //                 desc: "sdf33"
    //             },
    //             {
    //                 title: "2",
    //                 desc: "sdf33"
    //             },
    //             {
    //                 title: "3",
    //                 desc: "sdf33"
    //             },
    //             {
    //                 title: "4",
    //                 desc: "sdf33"
    //             },
    //             {
    //                 title: "5",
    //                 desc: "sdf33"
    //             },
    //             {
    //                 title: "6",
    //                 desc: "sdf33"
    //             },
    //             {
    //                 title: "7",
    //                 desc: "eee44"
    //             }
    //         ]);
    //     }

        {
            var render_somthing_demo_water_flow;
            render_somthing_demo_water_flow = new render_somthing();
            render_somthing_demo_water_flow.init({
                // div的id
                id: "#demo_water_flow",
                // x/y/flow   分别为x向滚动、y向滚动、瀑布流
                method: {
                    type: "flow",
                    gap: 10,
                    column: 3,
                },
                // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
                container: {
                    html: ``
                },
                // 渲染内容的配置
                content: {
                    // 默认渲染内容
                    default: `
        <div style="height:#{h}px;background-color:gray;">
        <div style="text-align:right;"><a>#{time}</a></div>
        <div style="text-align:right;"><a>#{size}</a></div>
        <div style="padding:20px;">#{title}</div>
        <img style="width:100%;" src="#{img}">
        </div>
            `,
                },
                // 字段函数-对传入的数据在渲染之前进行预处理
                field_function: [{
                        field: "time",
                        // 换算日期显示
                        type: "format_datetime",
                        // 相距现在时间间隔
                        format: "to-now",
                    },
                    {
                        field: "headimgurl",
                        // 字符串替换
                        type: "replace_text",
                        text: "http",
                        replace_text: "https",
                    },
                    {
                        field: "size",
                        // 格式化数字为文件大小
                        type: "format_filesize",
                        // 保留的小数位数
                        bit: 2,
                    },
                    {
                        field: "title",
                        // 字符遮罩
                        type: "mask_text",
                        // 从第N个字符开始
                        from: 4,
                        // 到第N个字符结束
                        to: 6,
                        // 使用此字符替换
                        char: "*",
                    },
                    {
                        field: "size",
                        // 字符没有内容时的替换
                        type: "null_replace",
                        // 替换内容
                        text: "0 B",
                    },
                    {
                        field: "time",
                        // 字符没有内容时的替换
                        type: "null_replace",
                        // 替换内容
                        text: "没有设置时间",
                    },
                ],
            })
            render_somthing_demo_water_flow.render([{
                    time: "2020-7-1 10:10:10",
                    title: "中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国",
                    desc: "sdf33",
                    size: 15990234,
                },
                {
                    time: "2020-6-1 10:10:10",
                    title: "bbb3333333",
                    desc: "eee44",
                    size: 90234,
                },
                {
                    time: "2020-7-19 10:10:10",
                    title: "bbb333333\n 3",
                    desc: "eee44",
                    size: 5990234,
                },
                {
                    title: "bbb3333333",
                    desc: "eee44",
                    img: "http://b-ssl.duitang.com/uploads/blog/201505/18/20150518025109_Lfmcx.jpeg",
                },
                {
                    title: "bbb3333333",
                    desc: "eee44",
                    img: "http://img3.imgtn.bdimg.com/it/u=2208162519,4010854312&fm=26&gp=0.jp",
                },
                {
                    title: "bbb3333333",
                    desc: "eee44",
                    img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2472153115,3034378969&fm=26&gp=0.jpg"
                },
                {
                    title: "bb\nb3\n333\n333",
                    desc: "eee44",
                },
                {
                    title: "bbb3333333",
                    desc: "eee44",
                    h: 120,
                },
                {
                    title: "bbb3333333",
                    desc: "eee44",
                    img: "https://www.w3school.com.cn/i/eg_tulip.jpg"
                },
                {
                    title: "bbb3333333",
                    desc: "eee44",
                    h: 160,
                },
                {
                    title: "bbb3333333",
                    desc: "eee44",
                    h: 150,
                },
                {
                    title: "bbb3333333",
                    desc: "eee44",
                    h: 110,
                },
            ]);

            setTimeout(() => {
                render_somthing_demo_water_flow.render([{
                        time: "2020-7-1 10:10:10",
                        title: "111中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国",
                        desc: "sdf33",
                        size: 15990234,
                    },
                    {
                        time: "2020-6-1 10:10:10",
                        title: "bbb3333333",
                        desc: "eee44",
                        size: 90234,
                    },
                    {
                        time: "2020-7-19 10:10:10",
                        title: "bbb333333\n 3",
                        desc: "eee44",
                        size: 5990234,
                    },
                    {
                        title: "bbb3333333",
                        desc: "eee44",
                        img: "http://b-ssl.duitang.com/uploads/blog/201505/18/20150518025109_Lfmcx.jpeg",
                    },
                    {
                        title: "bbb3333333",
                        desc: "eee44",
                        img: "http://img3.imgtn.bdimg.com/it/u=2208162519,4010854312&fm=26&gp=0.jp",
                    },
                    {
                        title: "bbb3333333",
                        desc: "eee44",
                        img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2472153115,3034378969&fm=26&gp=0.jpg"
                    },
                    {
                        title: "bb\nb3\n333\n333",
                        desc: "eee44",
                    },
                    {
                        title: "bbb3333333",
                        desc: "eee44",
                        h: 120,
                    },
                    {
                        title: "bbb3333333",
                        desc: "eee44",
                        img: "https://www.w3school.com.cn/i/eg_tulip.jpg"
                    },
                    {
                        title: "bbb3333333",
                        desc: "eee44",
                        h: 160,
                    },
                    {
                        title: "bbb3333333",
                        desc: "eee44",
                        h: 150,
                    },
                    {
                        title: "bbb3333333",
                        desc: "eee44",
                        h: 110,
                    },
                ], "append");

            }, 3000);
        }
</script>

</html>